<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
 
      .head {
        height: 50px;
        width: 100%;
        display: flex;
        background-color: rgb(16, 155, 220);
        justify-content: space-between;
        align-items: center;
      }
      .left {
        margin-left: 5px;
        display: flex;
        align-items: center;
      }
      .img1 {
        height: 25px;
        width: 25px;
        margin-right: 5px;
      }
      .img2 {
        height: 37px;
        width: 100px;
      }
      p {
        color: white;
      }
      .ct1 {
          height: 40px;
          display: flex;
          justify-content: center;
          margin-top: 2px;
      }
      .ct2 {
            height: 40px;
          display: flex;
          justify-content: center;
          margin-bottom: 17px;
      }
      .ct3 {
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          margin-bottom: 13px;
      }
      .ct3>p {
        color:rgb(1, 0, 138);
      }
      .ct3>h1 {
        color:rgb(1, 0, 138);
        font-size: 52px;
        line-height: 10px;
      }
      .ct4 {
          display: flex;
          justify-content: center;
      }
      .ct4>img {
          height: 150px;
          width: 110px;
      }
      .info {
          margin: 15px 22px;
      }
      .info>div {
          margin: 10px 24px;
          font-size: 17px;
      }
      .buttonclick {
          display: flex;
          justify-content: center;
      }
      .btn1 {
          background-color: rgb(25, 137, 249);
          height: 40px;
          width: 80px;
          color: rgb(223, 222, 222);
          border: none;
      }
      .btn2 {
          background-color: rgb(255, 151, 106);
          height: 40px;
          width: 60px;
          margin: 0px 10px;
          color: rgb(223, 222, 222);
          border: none;
      }
      .btn3 {
          background-color: rgb(5, 193, 96);
          height: 40px;
          width: 60px;
          color: rgb(223, 222, 222);
          border: none;
      }
    </style>
  </head>
  <body>
    <div class="head">
      <div class="left">
        <img src="3.svg"  crossOrigin="anonymous" alt="" class="img1" />
        <p>疫情防控报备证明</p>
      </div>
      <div class="right">
        <img src="2.png"  crossOrigin="anonymous" alt="" class="img2" />
      </div>
    </div>

    <div class="content">
        <div class="ct1">
            <h2 style="font-size: 24px;">疫情防控报备证明</h2>
        </div>
        <div class="ct2">
            <h2  id="curtime1" style="color: red; font-size: 29px;">2021/06/08 19:00:00</h2>
        </div>
        <div class="ct3">
            <p>本页面当日访问</p>
            <h1>28510</h2>
            <p>次</p>
        </div>
        <div class="ct4">
            <img src="dog.jpg"  crossOrigin="anonymous" alt="">
        </div>
        <div class="info"> 
            <div>姓名：郑灿升</div>
            <div>学号：181110082</div>
            <div>学院：计算机学院</div>
            <div>班级：计算机1802班</div>
            <div>出入事由：因私</div>
            <div>出入时间：</div>
            <div id="curtime2">2021年06月08日 19:00至2021年06月08日 21:00</div>
            <div>审批部门：计算机学院</div>
        </div>
        <div class="buttonclick">
            <button class="btn1">再次报备</button>
            <button class="btn2">刷新</button>
            <button class="btn3">返回</button>
        </div>
    </div>
    <script>
        Date.prototype.Format = function (fmt) { // author: meizz
            var o = {
                "M+": this.getMonth() + 1, // 月份
                "d+": this.getDate(), // 日
                "h+": this.getHours(), // 小时
                "m+": this.getMinutes(), // 分
                "s+": this.getSeconds(), // 秒
                "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                "S": this.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
        }
        function changeStr(str,index,changeStr){
	        return str.substr(0, index) + changeStr+ str.substr(index + changeStr.length);
	    }
        var time1 = new Date().Format("yyyy/MM/dd hh:mm:ss");
        var time2 = new Date().Format("yyyy年MM月dd日 hh:mm:ss");
        time2+=`至${time2}`
        var c=parseInt(time2[30])+1;
        time2=changeStr(time2,30,c.toString())
        document.getElementById('curtime1').innerText=time1;
        document.getElementById('curtime2').innerText=time2;
        setInterval(()=>{
            var time1 = new Date().Format("yyyy/MM/dd hh:mm:ss");
            document.getElementById('curtime1').innerText=time1;
        },1000)
        
        // console.log(time1);
        // console.log(time2);
        // console.log(time3);
    </script>
  </body>
</html>
